<template>
  <div>
    <div class="header-abc" v-show='showDiv'>
      <router-link  to='/' >
          <div class="iconfont header-abc-left">&#xe629;</div>
      </router-link>
    </div>
    <div class='header-fixed' v-show='!showDiv' :style="opacityStyle">
      景点详情
      <router-link to='/'>
          <div class="iconfont header-fixed-left">&#xe629;</div>
      </router-link>
    </div>
  </div>
</template>

<script>
  export default{
    name:'DetailHeader',
    data() {
      return{
        showDiv:true,
        opacityStyle:{
          opacity:0
        }
      }
    },
    methods: {
      handleScroll (){
        //获取文档距离窗口的位置 (兼容性处理)
        const top = document.documentElement.scrollTop || document.body.scrollTop || document.pageYOffset
       if(top > 60 ) {
         let opacity = top / 140
         // 如果opacity 大于1 就 等于1 不大于 1 就等于本身
         opacity = opacity > 1 ? 1 : opacity
         this.opacityStyle = { opacity }
         this.showDiv = false
       }else{
         this.showDiv = true
       }
      }
    },
    //当组件渲染的时候全局绑定addEventListener 事件箭听scrollTop 的高度
    mounted() {
      window.addEventListener('scroll', this.handleScroll)
    },
    //当组件 隐藏的时候 解绑
    destroyed() {
       window.removeEventListener('scroll', this.handleScroll)
    }
  }
</script>

<style lang="stylus" scoped>
@import '~@styles/varibles.styl';
.header-abc
  position fixed
  top .1rem
  left .1rem
  width .8rem
  height .8rem
  background-color rgba(0,0,0,0.3)
  text-align center
  border-radius 50%
.header-abc-left
  font-size .4rem!important
  color #FFFFFF!important
  line-height .8rem
 .header-fixed
 position fixed
 top 0
 left 0
 right 0
 height $headerHeight
 background-color $bgColor
 color $whiteText
 font-size 0.32rem
 line-height $headerHeight

.header-fixed-left
  position absolute
  left 0
  top 0
  width:.64rem
  float left
  line-height $headerHeight
  color $whiteText
  font-size .4rem
</style>
